<script setup lang="tsx">
import { ElMessage } from 'element-plus';

// jsxRender
const jsxRenderParams = {
  title: '这是jsx渲染出来的文本'
}
function renderFn(data: { title: string; }) {
  return <p class="jsx-render">{data.title}</p>
}

// JsxTable
const columns = [
  {
    prop: 'num',
    label: '序号',
  },
  {
    prop: 'tooltip',
    label: 'el-tooltip',
    renderCell: (row: TableData) => {
      return (
        <el-tooltip
          content={row.tooltip.content}
        >
          <span>{row.tooltip.name}</span>
        </el-tooltip>
      )
    }
  },
  {
    prop: 'progress',
    label: 'el-progress',
    renderCell: (row: TableData) => {
      return (
        <el-progress percentage={row.progress.percentage} status={row.progress.status} />
      )
    }
  },
  {
    prop: 'operate',
    label: '操作',
    renderCell: (row: TableData) => {
      return (
        <el-button type="primary" link onClick={() => clickOperate(row)}>编辑</el-button>
      )
    }
  }
]
const tableData: Array<TableData> = [
  {
    num: '1',
    tooltip: {
      name: '雷总',
      content: '雷军造车，天命所归，雷字带电，军字带车。'
    },
    progress: {
      percentage: 100,
      status: 'success'
    },
    msg: '这TMD绝对是捣乱的是吧'
  },
  {
    num: '2',
    tooltip: {
      name: '卢总',
      content: '新手还在看小米，老手已经开始等红米汽车了'
    },
    progress: {
      percentage: 50,
      status: ''
    },
    msg: '干翻友商小米'
  },
]
function clickOperate(item: TableData) {
  ElMessage({
    message: item.msg,
    type: 'success',
  })
}
</script>

<template>
  <div class="app">
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
      </a>
    </div>
    <h1>jsxRender</h1>
    <jsxRender :params="jsxRenderParams" :render="renderFn" />
    <h1>JsxTable</h1>
    <JsxTable :columns=columns :data=tableData />
  </div>
</template>

<style lang="scss" scoped>
.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 60vw;

  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }

  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }

  .logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }

  .jsx-render {
    color: #41B883;
  }
}
</style>
